<template>
  <el-form ref="loginForm" status-icon :rules="rules" class="login-form" :model="form">
    <el-form-item prop="username">
      <el-input v-model="form.username" auto-complete="off" placeholder="请输入用户名"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input type="password" v-model="form.password" auto-complete="off" placeholder="请输入密码"></el-input>
    </el-form-item>
    <el-form-item prop="captcha">
      <el-input v-model="form.captcha" auto-complete="off" placeholder="请输入验证码">
        <template slot="append">
          <img id="captcha" class="captcha" :src="captcha" @click="getCaptcha">
        </template>
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-checkbox v-model="form.checked">记住账号</el-checkbox>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" :loading="loading" @click="onSubmit" class="login-submit">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script>

  import Captcha from '@/api/system/captcha'

  export default {
    name: "user-login",
    data() {
      var that = this;
      var _checkCaptcha = function (rule, value, callback) {
        if (value && value.length >= 4) {
          that.checkCaptcha(value, function (flag) {
            if (flag) {
              callback();
            } else {
              callback(new Error('验证码不正确'));
            }
          });
        }
      };
      return {
        form: {
          username: 'SuperAdmin',
          password: '123456',
          captcha: ''
        },
        rules: {
          username: [
            {required: true, message: '请输入用户名', trigger: 'blur'},
            {min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {min: 5, max: 30, message: '长度在 5 到 30 个字符', trigger: 'blur'}
          ],
          captcha: [
            {required: true, message: '请输入验证码', trigger: 'blur'},
            {min: 1, max: 5, message: '长度在 5 到 30 个字符', trigger: 'blur'},
            {validator: _checkCaptcha, trigger: 'blur'}
          ]
        },
        captcha: '',
        captcha_etag: '',
        loading: false
      }
    },
    mounted() {
      this.getCaptcha();
    },
    methods: {
      getCaptcha: function () {
        var that = this;
        Captcha.base64().then(function (data) {
          that.captcha_etag = data.headers['captcha-etag']
          that.captcha = data.data;
        });
      },
      checkCaptcha: function (value, fun) {
        var that = this;
        Captcha.check(value, this.captcha_etag).then(function (data) {
          fun(data.data);
        });
      },
      onSubmit: function () {
        this.$refs['loginForm'].validate(v => {
          if (v) {
            this.doSubmit();
          } else {
            this.$message.error('错了哦，这是一条错误消息');
          }
        })
      },
      doSubmit: function () {
        this.loading = true
        this.$store.dispatch("LoginByUser", this.form).then(res => {
          this.loading = false
          this.$router.push({path: '/'});
        }).catch(() => {
          this.loading = false
        })
      }
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @require "../../ui/common/stylus/variable.styl"
  .captcha {
    display block;
    cursor: pointer
  }
  
  .el-form-item.is-error .el-input__inner {
    border-color: $color-danger;
    color $color-danger;
  }
  
  .el-form-item.is-success .el-input__inner {
    border-color: $color-success;
    color $color-success;
  }
</style>